<script setup lang="ts">
import Navigator from '@components/Navigator.vue'
import SongsPlayer from '@components/SongsPlayer.vue'
import Footer from '@components/Footer.vue'
</script>

<template>
  <div id="app">
    <Navigator class="position-r n-z"></Navigator>
    <RouterView class="position-r r-z"></RouterView>
    <SongsPlayer class="songs-player"></SongsPlayer>
    <Footer class="position-r r-z footer"></Footer>
  </div>
</template>

<style scoped>
#app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.position-r {
  position: relative;
}

.n-z {
  z-index: 100;
}

.r-z {
  z-index: 0;
}

.songs-player {
  position: fixed;
  z-index: 1;
  right: 0;
  bottom: 0;
}

.footer {
  position: relative;
  height: 3em;
  width: 100%;
  bottom: 0;
}
</style>
